<template>
  <map id="map" enable-rotate show-compass :rotate="rotate" :longitude="mapCenter.longitude"
    :latitude="mapCenter.latitude" :scale="mapCenter.scale" class="map-style" :show-location="true"
    :markers="currentMarkers" @markertap="onMarkerTap" @ready="onMapReady" @callouttap="onMarkerTap">
  </map>

  <common-popup v-model:show="showDetail" :title="currentDetail.title" @close="closeDetail">
    <!-- 图片区域 -->
    <view class="detail-image-container">
      <!-- 改为轮播图 -->
      <view class="detail-image">
        <u-swiper v-if="currentDetail.images" height="230" :list="currentDetail.images" :autoplay="false"
          :circular="true" :interval="3000" :duration="500" />
      </view>
      <!-- 营业时间标签 -->
      <view class="time-tag" v-if="currentDetail.openTime">
        <text class="material-icons time-icon">schedule</text>
        <text class="time-text">{{ currentDetail.openTime }}</text>
      </view>
    </view>

    <!-- 音频播放器 (仅在语音导览模式下显示) -->
    <view v-if="isAudioGuideActive && currentDetail.audioUrl" class="audio-player">
      <view class="audio-controls">
        <view class="play-button" @tap="isPlaying ? pauseAudio() : playAudio(currentDetail.audioUrl)">
          <text class="material-icons control-btn">
            {{ isPlaying ? 'pause_circle' : 'play_circle' }}
          </text>
          <text class="play-text">{{ isPlaying ? '暂停语音' : '播放语音' }}</text>
        </view>
        <text class="audio-time">{{ formatTime(currentTime) }} / {{ formatTime(audioDuration) }}</text>
      </view>
      <slider :value="audioProgress" @change="onSliderChange" activeColor="#B4846C" backgroundColor="#E5B299" />
    </view>

    <!-- 详情内容区域 -->
    <view class="detail-content">
      <!-- 描述信息 -->
      <view class="detail-section">
        <text class="section-title">{{ isAudioGuideActive ? '景点介绍' : '场馆介绍' }}</text>
        <text class="section-text">{{ currentDetail.description }}</text>
      </view>

      <!-- 特色功能 -->
      <view class="detail-section" v-if="currentDetail.features">
        <text class="section-title">特色功能</text>
        <view class="feature-tags">
          <view v-for="(feature, index) in currentDetail.features" :key="index" class="feature-tag">
            {{ feature }}
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="detail-section" v-if="currentDetail.contact">
        <text class="section-title">联系电话</text>
        <text class="contact-text">{{ currentDetail.contact }}</text>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="action-btn navigate-btn" @tap="startNavigation">
          <text class="material-icons btn-icon">near_me</text>
          <text>导航前往</text>
        </button>
        <button class="action-btn share-btn" @tap="handleShare">
          <text class="material-icons btn-icon">share</text>
          <text>分享</text>
        </button>
        <button class="action-btn share-btn" @tap="handleBooking" v-if="['toilet',
          'audioGuide'].indexOf(currentType) === -1">
          <text class="material-icons btn-icon">event_available</text>
          <text>预约</text>
        </button>
      </view>
    </view>
  </common-popup>

  <!-- 保留原有的控件容器 -->
  <view class="controls-container">
    <view v-for="item in controlItems" :key="item.id" class="control-item"
      :class="{ 'active': currentType === item.id }" @tap="switchMarker(item.id)">
      <text class="material-icons control-icon">{{ item.icon }}</text>
      <text class="control-text">{{ item.name }}</text>
    </view>
    <view class="control-item" @tap="toggleHandDrawnMap">
      <text class="material-icons control-icon">{{ showHandDrawnMap ? 'image' : 'map' }}</text>
      <text class="control-text">{{ showHandDrawnMap ? '手绘导览' : '查看地图' }}</text>
    </view>
  </view>

  <!-- 新增的手绘图切换按钮 -->

  <view class="audio-guide-container">
    <view class="audio-guide-btn" @tap="toggleAudioGuide">
      <text class="material-icons guide-icon">{{ isAudioGuideActive ? 'volume_up' : 'volume_off' }}</text>
      <text class="guide-text">语音导览</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import CommonPopup from '@/components/CommonPopup/index.vue';
import parking from '@/static/icons/parking.png'
import restaurant from '@/static/icons/restaurant.png'
import service from '@/static/icons/service.png'
import sports_basketball from '@/static/icons/sports_basketball.png'
import toilet from '@/static/icons/toilet.png'
import training from '@/static/icons/training.png'
import audioGuideIcon from '@/static/icons/audioGuideIcon.png'
import emergencyExit from '@/static/icons/emergencyExit.png'
// 定义地图中心点
const mapCenter = ref({
  longitude: 114.177462,
  latitude: 30.502767,
  scale: 15
});

const mapContext = ref<WechatMiniprogram.MapContext>();

// 定义控件项
const controlItems = [
  { id: 'sports', name: '运动场', icon: 'sports_basketball' },  // 运动场地分类
  { id: 'training', name: '培训', icon: 'school' },  // 培训项目分类
  { id: 'food', name: '美食', icon: 'restaurant' },  // 餐饮店铺分类
  { id: 'parking', name: '停车', icon: 'local_parking' },  // 停车场分类
  { id: 'service', name: '服务', icon: 'info' },  // 服务设施分类
  { id: 'toilet', name: '卫生间', icon: 'wc' },  // 卫生间分布
  { id: 'emergencyExit', name: '逃生通道', icon: 'directions_run' }  // 新增逃生通道
];

// 修改创建标记点的函数
const createMarker = (id: number, latitude: number, longitude: number, icon: string, title: string, color: string) => ({
  id,
  latitude,
  longitude,
  width: 32,
  height: 32,
  iconPath: icon,
  anchor: { x: 0.5, y: 1.0 },
  callout: {
    content: title,
    color: '#4A3520',
    fontSize: 16,
    borderRadius: 8,
    bgColor: '#FFFBF6E6',
    padding: '8rpx 20rpx',
    display: 'ALWAYS',
    textAlign: 'center',
    borderWidth: 1,
    borderColor: '#B4846C',
    anchorY: -8,
    anchorX: 0,
    zIndex: 2,
    textShadow: '0 1px 1px rgba(0, 0, 0, 0.1)',
    boxShadow: '0 2px 4px rgba(180, 132, 108, 0.2)',
    clickable: true
  },
  label: {
    content: '',
    color: '#00000000',
    fontSize: 1,
    padding: 2,
    borderRadius: 16,
    bgColor: '#00000033',
    anchorY: -2,
    anchorX: 0,
    borderWidth: 0,
    width: 8,
    height: 4
  }
});

// 优化颜色配置
const markerColors = {
  sports: '#FF6B6B',      // 运动场馆 - 红色
  training: '#4A90E2',    // 培训项目 - 蓝色
  food: '#FFA26B',        // 餐饮美食 - 橙色
  parking: '#00C6A7',     // 停车场 - 青色
  service: '#845EC2',     // 服务设施 - 紫色
  toilet: '#4E7BB4',       // 卫生间 - 深蓝色
  emergencyExit: '#3CB371' // 逃生通道 - 绿色
};

// 更新标记点数据
const markersData = {
  sports: [
    createMarker(1, 30.504276, 114.175134, sports_basketball, '武汉体育中心游泳馆', markerColors.sports),
    createMarker(2, 30.502854, 114.174026, sports_basketball, '羽毛球综合训练馆', markerColors.sports),
    createMarker(3, 30.503056, 114.172976, sports_basketball, '篮球公园', markerColors.sports),
    createMarker(4, 30.501828, 114.174512, sports_basketball, '武汉体育中心综合训练馆', markerColors.sports),
    createMarker(5, 30.501717, 114.172147, sports_basketball, '武体·天幕山滑板俱乐部', markerColors.sports),
    createMarker(6, 30.502041, 114.169405, sports_basketball, '网球公园', markerColors.sports),
    createMarker(7, 30.500097, 114.171553, sports_basketball, '武汉体育中心主体育场', markerColors.sports),
    createMarker(8, 30.500183, 114.168853, sports_basketball, '武汉体育中心足球训练场1', markerColors.sports),
    createMarker(9, 30.500814, 114.173068, sports_basketball, '重竞技馆', markerColors.sports),
    createMarker(10, 30.500744, 114.168988, sports_basketball, '武体中心田径俱乐部', markerColors.sports)
  ],
  training: [
    createMarker(11, 30.501495, 114.174362, training, '游泳培训', markerColors.training),
    createMarker(12, 30.502723, 114.174164, training, '羽毛球培训', markerColors.training),
    createMarker(13, 30.503045, 114.172886, training, '篮球培训', markerColors.training),
    createMarker(14, 30.501612, 114.174313, training, '乒乓球培训', markerColors.training),
    createMarker(15, 30.501774, 114.171993, training, '滑板培训', markerColors.training),
    createMarker(16, 30.502044, 114.169392, training, '网球培训', markerColors.training),
    createMarker(17, 30.500253, 114.168992, training, '足球培训', markerColors.training),
    createMarker(18, 30.500778, 114.173039, training, '重竞技培训', markerColors.training),
    createMarker(19, 30.500184, 114.172943, training, '瑜伽培训', markerColors.training),
  ],
  food: [
    createMarker(20, 30.503269, 114.174116, restaurant, 'LAVAZZA拉瓦萨咖啡', markerColors.food),
    createMarker(21, 30.502713, 114.172986, restaurant, '5T.ART食艺空间', markerColors.food),
    createMarker(22, 30.500651, 114.170589, restaurant, '合和餐厅', markerColors.food)
  ],
  parking: [
    createMarker(23, 30.504612, 114.174211, parking, '游泳馆停车场A区', markerColors.parking),
    createMarker(24, 30.504603, 114.176066, parking, '游泳馆停车场B区', markerColors.parking)
  ],
  service: [
    createMarker(25, 30.499272, 114.172088, service, '东风汽车商城（车谷直播中心）', markerColors.service),
    createMarker(26, 30.502529, 114.171995, service, '武体职工之家', markerColors.service),
    createMarker(27, 30.501158, 114.171284, service, '消防救援站', markerColors.service),
    createMarker(28, 30.500725, 114.170736, service, '合和客舍（北楼）', markerColors.service),
    createMarker(29, 30.506795, 114.173782, service, '武汉经开万达广场', markerColors.service),
    createMarker(30, 30.496746, 114.168153, service, '湘隆时代广场', markerColors.service)
  ],
  toilet: [
    createMarker(31, 30.500535, 114.173557, toilet, '卫生间A', markerColors.toilet),
    createMarker(32, 30.499503, 114.173543, toilet, '卫生间B', markerColors.toilet),
    createMarker(33, 30.498573, 114.172122, toilet, '卫生间C', markerColors.toilet)
  ],
  // 新增逃生通道标记
  emergencyExit: [
    createMarker(37, 30.503876, 114.175134, emergencyExit, '逃生通道A', markerColors.emergencyExit),
    createMarker(38, 30.502854, 114.174026, emergencyExit, '逃生通道B', markerColors.emergencyExit),
    createMarker(39, 30.501828, 114.174512, emergencyExit, '逃生通道C', markerColors.emergencyExit),
    createMarker(40, 30.500744, 114.168988, emergencyExit, '逃生通道D', markerColors.emergencyExit)
  ],
  // 添加语音导览标记
  audioGuide: [
    createMarker(34, 30.499976, 114.171638, audioGuideIcon, '体育中心主馆', '#B4846C'),
    createMarker(35, 30.504373, 114.175158, audioGuideIcon, '游泳馆', '#B4846C'),
    createMarker(36, 30.501758, 114.174547, audioGuideIcon, '综合训练中心', '#B4846C'),
    // 可以继续添加更多景点
  ]
};

// 当前显示的标记点
const currentMarkers = ref<any[]>([]);

// 添加当前选中的类型
const currentType = ref('');

const isFlag = ref(false);


const addOverlay = (type: string) => {

if (type === 'emergencyExit') {
  isFlag.value = true;
 
  mapContext.value?.addGroundOverlay({
    id: 2,
    src: 'https://szhy.artcollegehb.cn/school/file/school/fj/20250114/173f271f35c245daba016cec4f098782shouhuitu-luxian.png',
    bounds: getOverlayBounds(),
    visible: true,
    zIndex: 2,
    opacity: 0.8,
    success: () => {
      console.log('添加图层成功');
    },
    fail: (error) => {
      console.error('添加图层失败', error);
    }
    });
} else {
  if (isFlag.value) {
    mapContext.value?.removeGroundOverlay({
      id: 2,
    });
    isFlag.value = false;
  }
}
}

// 修改切换标记点的方法，添加地图聚焦效果
const switchMarker = (type: string) => {
  currentType.value = type;
  const markers = markersData[type as keyof typeof markersData] || [];
  currentMarkers.value = markers;

  addOverlay(type);
  setTimeout(() => {
    // 如果有标记点，则聚焦到第一个标记点
    if (markers.length > 0) {
      const firstMarker = markers[0];
      mapContext.value?.moveToLocation({
        longitude: firstMarker.longitude,
        latitude: firstMarker.latitude,
        success: () => {
          // 确保地图缩放到合适的级别

          mapCenter.value.scale = 15;

        }
      });
    }
  }, 100);
};


// 计算覆盖物范围
const getOverlayBounds = () => {
  const offset = 0.0116;
  return {

    southwest: {
      longitude: mapCenter.value.longitude - offset,
      latitude: mapCenter.value.latitude - offset
    },
    northeast: {
      longitude: mapCenter.value.longitude + offset,
      latitude: mapCenter.value.latitude + offset
    }
  };
};

// 定义标记点详情数据
const markerDetails = {
  // 运动场馆
  'sports-1': {
    title: '游泳馆',
    images: ['https://www.ztpiao.cn/upload/cg/1388052940764.jpg'],
    description: '标准50米泳池，8条泳道，配备专业净化系统。室内恒温设计，全年保持28度水温。配有专业救生员全程值守。',
    openTime: '06:00-22:00',
    features: ['恒温泳池', '更衣室', '淋浴间', '储物柜', '专业教练'],
    contact: '027-12345672',
    id: 1,
  },
  'sports-2': {
    title: '羽毛球综合训练馆',
    images: ['https://n.sinaimg.cn/spider20220602/290/w1080h810/20220602/2daa-aa36b29ff4d725b127d07d4572af6b55.jpg'],
    description: '设有12片标准羽毛球场地，采用专业PVC运动地胶，配备完善的通风系统和LED照明。',
    openTime: '07:00-23:00',
    features: ['标准场地', '器材租借', '空调控温', '休息区'],
    contact: '027-12345673',
    id: 2,
  },
  'sports-3': {
    title: '篮球公园',
    images: ['https://p2.itc.cn/q_70/images03/20201005/a6f8d7d364804cf7aff48aa44f3f30e3.jpeg'],
    description: '标准篮球场，配备专业木地板和照明系统，可容纳200人同时运动。场地配备电子记分牌和专业音响设备，适合举办各类比赛。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '观众席', '电子记分牌', '专业照明'],
    contact: '027-12345671',
    id: 3,
  },
  'sports-4': {
    title: '武汉体育中心综合训练馆',
    images: ['https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190913/41d126b661844d2091c264aaf17b1cd6.jpeg'],
    description: '武汉体育中心综合训练馆提供多种训练设施和服务，包括羽毛球、乒乓球、健身等项目。馆内设施齐全，适合各种训练和健身需求‌。',
    openTime: 'Mon-Fri:12:00-21:30,Sun:08:30-21:30‌',
    features: ['综合训练', '器材租借', '教练指导', '休息区'],
    contact: '027-12345674',
    id: 4,
  },
  'sports-5': {
    title: '武体·天幕山滑板俱乐部',
    images: ['https://inews.gtimg.com/om_bt/O2GxtoT9A5xpbebU_XpxM5hHMvJZwV0PJJNq95iTkisusAA/641'],
    description: '武体·天幕山滑板俱乐部的主要业务是滑板培训，提供专业的滑板教学和训练服务。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '专业滑板教学', '专业训练服务'],
    contact: '027-12345671',
    id: 5,
  },
  'sports-6': {
    title: '网球公园',
    images: ['https://img0.baidu.com/it/u=3879131340,2729303788&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'],
    description: '在设施方面，武汉体育中心网球公园内的合和网球馆设有标准网球场2片、儿童短网4片，同时风雨球馆还设有标准网球场3片，室外标准网球场1片。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '观众席', '电子记分牌', '专业照明'],
    contact: '027-12345671',
    id: 6,
  },
  'sports-7': {
    title: '武汉体育中心主体育场',
    images: ['https://img1.baidu.com/it/u=1471293960,2640878015&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500'],
    description: '武汉体育中心主体育场的设计注重实用性和现代化，设施齐全，能够举办各种大型活动和赛事。体育场内设有先进的体育设施和活动空间，满足各类体育赛事和文艺演出的需求‌。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '观众席', '大型赛事、商演活动', '专业照明'],
    contact: '027-12345671',
    id: 7,
  },
  'sports-8': {
    title: '武汉体育中心足球训练场1',
    images: ['https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0416%2F1b40e274j00sc1bog00xsd200u000h3g012200lo.jpg&thumbnail=660x2147483647&quality=80&type=jpg'],
    description: '训练场配备了地下供热系统和自动喷灌系统，确保草坪四季常青，绿保期达270天。此外，训练场还设有东、西、南三个广场，可同时举办大型集会和文化演出等活动‌。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '观众席', '电子记分牌', '专业照明'],
    contact: '027-12345671',
    id: 8,
  },
  'sports-9': {
    title: '重竞技馆',
    images: ['https://gbres.dfcfw.com/Files/iimage/20231229/2329991F7934A50CC45B32BAF3DA73C3_w1430h953.jpg'],
    description: '重竞技馆内设有专业的训练和比赛设施，能够满足国内外高水平比赛的需求。馆内设施齐全，配备了先进的训练设备和比赛场地，确保运动员在训练和比赛中能够达到最佳状态。此外，重竞技馆还提供商业购物和训练热身设施，方便运动员和观众的使用。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '专业培训', '专业设施', '专业教练'],
    contact: '027-12345671',
    id: 9,
  },
  'sports-10': {
    title: '武体中心田径俱乐部',
    images: ['https://img1.baidu.com/it/u=1156383248,3330547342&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'],
    description: '武汉体育中心的田径俱乐部提供了专业的田径训练服务，是多个专业队伍进行训练和比赛的场所。这个综合性运动场馆配置了多个田径场和足球场，能够满足不同水平的田径爱好者和专业运动员的需求。',
    openTime: '08:00-22:00',
    features: ['标准场地', '更衣室', '观众席', '电子记分牌', '专业照明'],
    contact: '027-12345671',
    id: 10,
  },
  // 培训项目
  'training-11': {
    title: '游泳培训',
    images: ['https://img1.baidu.com/it/u=1577425847,2099966114&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'],
    description: '提供专业的游泳培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 11,
  },
  'training-12': {
    title: '羽毛球培训',
    images: ['https://qcloud.dpfile.com/pc/AkB5IBOMc3WQObj41_0Ejyn6Wqms2jN-ndy4nOjfq0oT_p_NlQV3-I3R8sFMnjwG.jpg'],
    description: '针对不同年龄段设置的羽毛球培训课程，包括基础技能训练和战术配合训练。',
    openTime: '10:00-20:00',
    features: ['青少年培训', '成人训练营', '团队建设', '比赛指导'],
    contact: '027-12345676',
    id: 12,
  },
  'training-13': {
    title: '篮球培训',
    images: ['https://img2.baidu.com/it/u=3882935905,1447986214&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'],
    description: '针对不同年龄段设置的篮球培训课程，包括基础技能训练和战术配合训练。',
    openTime: '09:00-19:00',
    features: ['体能训练', '协调训练', '团队活动', '假期营地'],
    contact: '027-12345677',
    id: 13,
  },
  'training-14': {
    title: '乒乓球培训',
    images: ['https://i0.hdslb.com/bfs/archive/5031e128f975164e8565e9999b2abd6dd08f9f87.jpg'],
    description: '提供专业的乒乓球培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 14,
  },
  'training-15': {
    title: '滑板培训',
    images: ['https://img1.baidu.com/it/u=45817180,895571063&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'],
    description: '提供专业的滑板培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 15,
  },
  'training-16': {
    title: '网球培训',
    images: ['https://www.sport.gov.cn/n20001280/n20067626/n20067766/c27662137/part/27662250.jpg'],
    description: '提供专业的网球培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 16,
  },
  'training-17': {
    title: '足球培训',
    images: ['https://img1.baidu.com/it/u=4119907485,493551262&fm=253&fmt=auto&app=138&f=JPEG?w=1201&h=800'],
    description: '提供专业的足球培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 17,
  },
  'training-18': {
    title: '重竞技培训',
    images: ['https://q6.itc.cn/q_70/images03/20240718/d4a0523703da466096be72812cb4c75d.jpeg'],
    description: '提供专业的重竞技培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 18,
  },
  'training-19': {
    title: '瑜伽培训',
    images: ['https://qcloud.dpfile.com/pc/xdNSkNhWJDqsdquXWqtX2bZ7wki6rDcyhpwtuP98ZBK4pKUR4-7HxwbA7VFa8fTK.jpg'],
    description: '提供专业的瑜伽培训课程，从零基础到进阶。配备经验丰富的教练团队，采用科学的教学方法。',
    openTime: '09:00-21:00',
    features: ['一对一教学', '小班教学', '亲子课程', '竞技培训'],
    contact: '027-12345675',
    id: 19,
  },

  // 餐饮设施
  'food-20': {
    title: 'LAVAZZA拉瓦萨咖啡',
    images: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4b25c176-91db-45e5-bb70-4882d15e2b4d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1738919154&t=cea36fee0507e59ca4aab46d3da27ecf'],
    description: '‌武汉体育中心的LAVAZZA拉瓦萨咖啡店提供优雅舒适的环境和高质量的咖啡体验‌。该店的环境设计独特，充满意大利风情，适合与朋友一起享受下午茶时光‌。店内的咖啡师专业细心，会根据顾客的口味推荐适合的咖啡，并提供企业下午茶定制服务‌。',
    openTime: '10:00-22:00',
    features: ['运动主题装修', '营养师指导', '低卡餐点', '蛋白质补充'],
    contact: '027-12345678',
    id: 20,
  },
  'food-12': {
    title: '5T.ART食艺空间',
    images: ['https://img1.baidu.com/it/u=1800374224,2240985409&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500'],
    description: '‌武汉体育中心5T.ART食艺空间‌是一家集花艺、园艺、Livehouse、主题活动策划和执行于一体的花园艺术餐厅，位于武汉体育中心八号门前行50米。餐厅由园艺师小五老师主理，她不仅是插花老师、花艺设计师，还擅长园艺设计。餐厅占地1200多平方米，装修设计高级，分为室内和室外两种用餐区，所有使用的花卉都是当天的鲜花‌。',
    openTime: '08:00-21:00',
    features: ['轻食沙拉', '鲜榨果汁', '蛋白餐', '能量补充'],
    contact: '027-12345679',
    id: 21,
  },
  'food-22': {
    title: '合和餐厅',
    images: ['https://imagepphcloud.thepaper.cn/pph/image/322/354/414.jpg'],
    description: '合和餐厅位于武汉体育中心内，紧邻中国车谷国际体育文化交流中心，宾客下楼就能参加中心活动，出门即可拥抱武汉体育中心国际级场馆群‌。餐厅周边交通便利，北邻太子湖路，南至车城北路，西临东风大道，东达体育路‌。',
    openTime: '07:00-22:00',
    features: ['营养补充', '能量饮品', '健康小食', '蛋白奶昔'],
    contact: '027-12345680',
    id: 22,
  },

  // 停车场
  'parking-23': {
    title: '游泳馆停车场A区',
    images: ['https://img0.baidu.com/it/u=2168328045,3264009412&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'],
    description: '露天停车场，配备遮阳棚，适合临时停车。共有100个车位。24小时监控和保安巡逻。',
    openTime: '全天候开放',
    features: ['智能引导', '充电桩', '24小时监控', '收费停车'],
    contact: '027-12345681',
    id: 23,
  },
  'parking-24': {
    title: '游泳馆停车场B区',
    images: ['https://nimg.ws.126.net/?url=http%3A%2F%2Fspider.ws.126.net%2F8305de4d768ecf2255b86497847d50c1.jpeg&thumbnail=660x2147483647&quality=80&type=jpg'],
    description: '露天停车场，配备遮阳棚，适合临时停车。设有100个车位，包含无障碍车位。',
    openTime: '全天候开放',
    features: ['遮阳棚', '临时停车', '无障碍车位', '收费停车'],
    contact: '027-12345682',
    id: 24,
  },

  // 服务设施
  'service-25': {
    title: '东风汽车商城（车谷直播中心）',
    images: ['https://q9.itc.cn/q_70/images03/20240725/653f23966b114ba187bf189eb58024cc.jpeg'],
    description: '是武汉体育中心内一个综合性商业区域，集汽车销售、展示、服务和直播等功能于一体。它是武汉地区重要的汽车交易平台，同时也是东风汽车集团的重要销售和展示平台。',
    openTime: '08:00-22:00',
    features: ['汽车销售', '汽车展示', '汽车服务', '汽车直播'],
    contact: '027-12345683',
    id: 25,
  },
  'service-26': {
    title: '武体职工之家',
    images: ['https://www.forestry.gov.cn/u/cms/gyljczx/202409/24172923d45g.jpg'],
    description: '是武汉体育中心内部的职工文化、娱乐、休闲活动场所。它为武汉体育中心的职工提供了一个交流、休息及增进团队凝聚力的平台。这里通常设有健身房、图书馆、活动室等多功能区域，以满足职工的不同需求。同时，职工之家也会定期举办各种文化、体育活动，丰富职工的业余生活。',
    openTime: '08:00-21:30',
    features: ['职工文化', '职工娱乐', '职工休闲',],
    contact: '027-12345684',
    id: 26,
  },
  'service-27': {
    title: '消防救援站',
    images: ['https://b0.bdstatic.com/27d703df15f8148c088e2132ad459aff.jpg@h_1280'],
    description: '是武汉市消防救援支队的一个重要组成部分，负责武汉体育中心及其周边地区的消防安全工作。该站不仅承担日常的消防巡逻和应急救援任务，还在各类大型活动中提供消防保障。',
    openTime: '08:00-22:00',
    features: ['急救服务', '地区消防', '安全保障'],
    contact: '027-12345685',
    id: 27,
  },
  'service-28': {
    title: '合和客舍（北楼）',
    images: ['https://inews.gtimg.com/om_bt/O1UxXnTlwZpIuC4nH4c8sWmkIM2LuLtNSwV78ZFwOlw28AA/641'],
    description: '是武汉体育中心集团有限公司旗下的首个精品文化酒店，位于武汉经开区武汉体育中心体育场西区。酒店于2024年9月16日正式揭牌开业，是湖北省唯一一个依附体育场主体建筑而建的精品酒店‌。',
    openTime: '08:00-22:00',
    features: ['精品文化酒店'],
    contact: '027-12345685',
    id: 28,
  },
  'service-29': {
    title: '武汉经开万达广场',
    images: ['https://img2.baidu.com/it/u=2612111010,2177375238&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'],
    description: '是一个集大型商业中心、休闲娱乐中心、五星级酒店、高级写字楼、精品公寓和商业步行街为一体的大型城市综合体‌。',
    openTime: '08:00-22:00',
    features: ['商业中心', '休闲娱乐中心', '五星级酒店', '高级写字楼'],
    contact: '027-12345685',
    id: 29,
  },
  'service-30': {
    title: '湘隆时代广场',
    images: ['https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190208/e2732bc0393a4784b4ec3ea930201009.jpeg'],
    description: '是一个集大型商业中心、休闲娱乐中心、五星级酒店、高级写字楼、精品公寓和商业步行街为一体的大型城市综合体‌。',
    openTime: '08:00-22:00',
    features: ['商业中心', '休闲娱乐中心', '五星级酒店', '高级写字楼'],
    contact: '027-12345685',
    id: 30,
  },
  // 卫生间
  'toilet-31': {
    title: '卫生间A',
    images: ['https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0326%2F6bab2af3j00say01p006yd000fv00afc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'],
    description: '位于体育馆一层东侧，配备无障碍设施，定时打扫消毒。',
    openTime: '全天候开放',
    features: ['无障碍设施', '母婴室', '定时消毒', '通风系统'],
    contact: '027-12345686',
    id: 31,
  },
  'toilet-32': {
    title: '卫生间B',
    images: ['https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0326%2F6bab2af3j00say01p006yd000fv00afc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'],
    description: '位于体育馆二层西侧，配备智能设施，环境整洁。',
    openTime: '全天候开放',
    features: ['智能设施', '节水系统', '通风系统', '环境除味'],
    contact: '027-12345687',
    id: 32,
  },
  'toilet-33': {
    title: '卫生间C',
    images: ['https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0326%2F6bab2af3j00say01p006yd000fv00afc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'],
    description: '位于游泳馆入口处，配备淋浴设施，适合游泳后使用。',
    openTime: '全天候开放',
    features: ['淋浴设施', '烘干设备', '储物柜', '防滑设计'],
    contact: '027-12345688',
    id: 33,
  },

  // 添加语音导览的详情
  'audioGuide-34': {
    title: '体育中心主馆',
    images: ['https://xibuyj.com/school/file/sport/static/e1fd8569-a2d0-4904-b910-66da9592101a.mp4', 'https://img1.baidu.com/it/u=1471293960,2640878015&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=500'],
    description: '体育中心主馆是一座现代化的综合性体育场馆,可举办各类大型体育赛事。馆内设施完善,包括篮球场、羽毛球场等多功能运动场地。',
    audioUrl: 'https://xibuyj.com/school/file/sport/static/audio.mp3',
    openTime: '08:00-22:00',
    features: ['多功能场馆', '观众席位', '赛事服务', '运动培训'],
    id: 35,
  },
  'audioGuide-35': {
    title: '游泳馆',
    images: ['https://xibuyj.com/school/file/sport/static/e1fd8569-a2d0-4904-b910-66da9592101a.mp4', 'https://www.ztpiao.cn/upload/cg/1388052940764.jpg'],
    description: '游泳馆配备标准50米泳池和训练池,采用先进的水处理系统,全年恒温。这里不仅是游泳爱好者的天堂,也是专业运动员的训练基地。',
    audioUrl: 'https://xibuyj.com/school/file/sport/static/audio.mp3',
    openTime: '06:00-22:00',
    features: ['标准泳池', '专业教练', '更衣室', '水质监测'],
    id: 36,
  },
  'audioGuide-36': {
    title: '综合训练中心',
    images: ['https://xibuyj.com/school/file/sport/static/e1fd8569-a2d0-4904-b910-66da9592101a.mp4', 'https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190913/41d126b661844d2091c264aaf17b1cd6.jpeg'],
    description: '综合训练中心配备专业健身器材和训练场地,提供专业的运动训练指导。这里是运动爱好者提升技能、强身健体的理想场所。',
    audioUrl: 'https://xibuyj.com/school/file/sport/static/audio.mp3',
    openTime: '07:00-21:30',
    features: ['专业器材', '私教指导', '体能训练', '康复理疗'],
    id: 37,
  }
};

// 简化弹窗控制
const showDetail = ref(false);
const currentDetail = ref<any>({});

// 打开弹窗
const openDetail = (detail: any) => {
  currentDetail.value = detail;
  showDetail.value = true;
};

// 关闭弹窗
const closeDetail = () => {
  console.log('Closing detail...');
  showDetail.value = false;
  currentDetail.value = {};
  // 语音如果开启就关闭
  if (isAudioGuideActive.value) {
    stopAudio();
  }
};

// 修改标记点点击事件
const onMarkerTap = (e: any) => {
  const markerId = e.detail.markerId || e.markerId;
  const marker = currentMarkers.value.find(m => m.id === markerId);

  if (marker) {
    mapContext.value?.moveToLocation({
      longitude: marker.longitude,
      latitude: marker.latitude,
      success: () => {
        // 处理其他类型标记
        const detailKey = `${currentType.value}-${markerId}`;
        if (markerDetails[detailKey]) {
          openDetail(markerDetails[detailKey]);
        }
      }
    });
  }
};

onMounted(() => {
  mapContext.value = uni.createMapContext('map', { this: mapContext });
  addGroundOverlay();
});
const rotate = ref(0);

const onMapReady = () => {
  console.log('地图加载完成');

};
// 添加自定义图片图层的方法
const addGroundOverlay = () => {
  if (mapContext.value) {

    mapContext.value.addGroundOverlay({
      id: 1,
      // src: 'https://szhy.artcollegehb.cn/school/file/school/fj/20250108/ed38a5e238314e40ba8fcbcc7dfbce5af6686f15b4d99d68dd4074a8407c57c.png',
      src: 'https://szhy.artcollegehb.cn/school/file/school/fj/20250114/39218e53e5c3472998fc4407f49d2e41shouhuitu.png',
      // src: 'https://szhy.artcollegehb.cn/school/file/school/fj/20250108/9e6f6c516e874f97b295c2a29a04c077ad86f49e3b5efe4f69ddb81a9a79f48.png',
      bounds: getOverlayBounds(),
      visible: true,
      zIndex: 1,
      opacity: 0.8,
      success: () => {
        console.log('添加图层成功');
        mapContext.value?.moveToLocation({
          longitude: mapCenter.value.longitude,
          latitude: mapCenter.value.latitude,
          success: () => {
            rotate.value = 230;
          }
        });
      },
      fail: (error) => {
        console.error('添加图层失败', error);
      }
    });
  } else {
    console.error('地图上下文未准备好');
  }
};

// 修改切换语音导览的函数
const toggleAudioGuide = () => {
  isAudioGuideActive.value = !isAudioGuideActive.value;

  if (isAudioGuideActive.value) {
    // 直接使用 markersData 中的语音导览标记
    currentMarkers.value = markersData.audioGuide;
    currentType.value = 'audioGuide';
  } else {
    // 恢复原来的标记
    switchMarker(currentType.value === 'audioGuide' ? '' : currentType.value);
    stopAudio();
  }
};

// 添加语音导览相关的状态
const isAudioGuideActive = ref(false);
const isPlaying = ref(false);
const currentTime = ref(0);
const audioDuration = ref(0);
const audioProgress = ref(0);
const audioContext = ref<UniApp.InnerAudioContext | null>(null);

// 音频控制函数
const playAudio = (url: string) => {
  if (audioContext.value) {
    stopAudio();
  }

  audioContext.value = uni.createInnerAudioContext();
  audioContext.value.src = url;
  audioContext.value.onTimeUpdate(() => {
    if (audioContext.value) {
      currentTime.value = audioContext.value.currentTime;
      audioDuration.value = audioContext.value.duration;
      audioProgress.value = (currentTime.value / audioDuration.value) * 100;
    }
  });

  audioContext.value.onEnded(() => {
    isPlaying.value = false;
    currentTime.value = 0;
    audioProgress.value = 0;
  });

  audioContext.value.play();
  isPlaying.value = true;
};

const pauseAudio = () => {
  if (audioContext.value) {
    audioContext.value.pause();
    isPlaying.value = false;
  }
};

const stopAudio = () => {
  if (audioContext.value) {
    audioContext.value.stop();
    audioContext.value.destroy();
    audioContext.value = null;
    isPlaying.value = false;
    currentTime.value = 0;
    audioProgress.value = 0;
  }
};

// 格式化时间显示
const formatTime = (seconds: number) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
};

// 进度条控制
const onSliderChange = (e: any) => {
  if (audioContext.value && audioDuration.value) {
    const value = e.detail.value;
    const time = (value / 100) * audioDuration.value;
    audioContext.value.seek(time);
    currentTime.value = time;
  }
};

// 在组件卸载时清理音频
onUnmounted(() => {
  stopAudio();
});

// 添加导航功能
const startNavigation = () => {

  const marker = currentMarkers.value.find(m => m.id === currentDetail.value.id);

  if (!marker) {
    console.log('未找到对应的标记点');
    return;
  }

  if (!marker) return;
  // 打开内置地图导航
  uni.openLocation({
    latitude: marker.latitude,
    longitude: marker.longitude,
    name: currentDetail.value.title,
    address: currentDetail.value.description || '',
    success: () => {
      console.log('导航开启成功');
    },
    fail: (err) => {
      console.error('导航开启失败', err);
      uni.showToast({
        title: '导航开启失败',
        icon: 'none'
      });
    }
  });
};

// 添加分享功能
const handleShare = () => {
  // 构建分享内容
  const shareTitle = currentDetail.value.title;
  const shareContent = currentDetail.value.description;
  const shareImageUrl = currentDetail.value.image;

  // 显示分享菜单
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
    success: () => {
      console.log('分享菜单打开成功');
    },
    fail: (err) => {
      console.error('分享菜单打开失败', err);
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      });
    }
  });
};

// 定义分享给朋友的回调
onShareAppMessage(() => {
  return {
    title: currentDetail.value.title,
    desc: currentDetail.value.description,
    imageUrl: currentDetail.value.image,
    path: `/pages/tourGuide/index?type=${currentType.value}&id=${currentDetail.value.id}`,
    success: () => {
      console.log('分享成功');
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      });
    },
    fail: () => {
      console.log('分享失败');
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      });
    }
  };
});

const handleBooking = () => {
  // 跳转美团小程序
  uni.navigateToMiniProgram({
    appId: 'wx2c348cf579062e56', // 美团外卖小程序的appId
    path: 'pages/home/index', // 跳转的页面路径
    extraData: {
      foo: 'bar'
    },
    success(res) {
      console.log(res);

      // 打开美团外卖小程序成功
    }
  })

};

// 定义分享到朋友圈的回调
onShareTimeline(() => {
  return {
    title: currentDetail.value.title,
    query: `type=${currentType.value}&id=${currentDetail.value.id}`,
    imageUrl: currentDetail.value.image,
    success: () => {
      console.log('分享到朋友圈成功');
    },
    fail: () => {
      console.log('分享到朋友圈失败');
    }
  };
});

// 添加处理分享进入的逻辑
onLoad((options) => {
  if (options.type) {
    // 从分享链接进入
    const type = options.type;
    const id = options.id;

    // 切换到对应的标记类型
    switchMarker(type);

    if (options.id) {
      // 打开对应的详情
      const detailKey = isAudioGuideActive.value ? id : `${type}-${id}`;
      if (markerDetails[detailKey]) {
        openDetail(markerDetails[detailKey]);
      }
    }


  }
});

// 新增状态，控制手绘图的显示
const showHandDrawnMap = ref(false);

// 切换手绘图的显示
const toggleHandDrawnMap = () => {
  showHandDrawnMap.value = !showHandDrawnMap.value;
  if (showHandDrawnMap.value) {
    // 切换到手绘图
    mapContext.value?.removeGroundOverlay({
      id: 1,
      success: () => {
        console.log('移除图层成功');
      },
      fail: (error) => {
        console.error('移除图层失败', error);
      }
    });
    if (isFlag.value) {
      mapContext.value?.removeGroundOverlay({
      id: 2,
      success: () => {
        console.log('移除图层成功');
      },
      fail: (error) => {
        console.error('移除图层失败', error);
      }
    });
    }
  } else {
    // 切换回地图
    addGroundOverlay();
  addOverlay(currentType.value );

  }
};
</script>

<style lang="scss">
/* 保留地图基础样式 */
.map-style {
  height: 100vh;
  width: 100%;
}

/* 保留控件容器样式 */
.controls-container {
  position: fixed;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  z-index: 100;
  padding: 16rpx;
  gap: 16rpx;
}

/* 保留控件项样式 */
.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  padding: 16rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.control-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
  color: #333;
  transition: color 0.3s ease;
}

.control-text {
  font-size: 20rpx;
  color: #666;
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* 保留控件交互样式 */
.control-item:active {
  opacity: 0.8;
  transform: scale(0.95);
}

.control-item.active .control-icon,
.control-item.active .control-text {
  color: #ffffff;
}

/* 保留渐变背景样式 */
.control-item:nth-child(1) {
  background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);
}

.control-item:nth-child(2) {
  background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);
}

.control-item:nth-child(3) {
  background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
}

.control-item:nth-child(4) {
  background: linear-gradient(135deg, #84FAB0 0%, #8FD3F4 100%);
}

.control-item:nth-child(5) {
  background: linear-gradient(135deg, #A6C1EE 0%, #FBC2EB 100%);
}

.control-item:nth-child(6) {
  background: linear-gradient(135deg, #CFD9DF 0%, #E2EBF0 100%);
}

.control-item:nth-child(7) {
  background: linear-gradient(135deg, #90BE6D 0%, #43AA8B 100%);
}

.control-item.active:nth-child(1) {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
}

.control-item.active:nth-child(2) {
  background: linear-gradient(135deg, #4A90E2 0%, #67A7F3 100%);
}

.control-item.active:nth-child(3) {
  background: linear-gradient(135deg, #FFA26B 0%, #FF8E53 100%);
}

.control-item.active:nth-child(4) {
  background: linear-gradient(135deg, #00C6A7 0%, #00E3AE 100%);
}

.control-item.active:nth-child(5) {
  background: linear-gradient(135deg, #845EC2 0%, #9B6FD3 100%);
}

.control-item.active:nth-child(6) {
  background: linear-gradient(135deg, #4E7BB4 0%, #5C8DC9 100%);
}

.control-item.active:nth-child(7) {
  background: linear-gradient(135deg, #3CB371 0%, #43AA8B 100%);
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .controls-container {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .control-text {
    color: #ffffff;
  }

  .control-icon {
    color: #ffffff;
  }
}

/* 详情页样式 */
.detail-image-container {
  position: relative;
  width: 100%;
  height: 460rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.3s ease;
}

.time-tag {
  position: absolute;
  bottom: 36rpx;
  right: 36rpx;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 16rpx 32rpx;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  z-index: 1;
  backdrop-filter: blur(8px);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.time-icon {
  font-size: 32rpx;
  color: #ffffff;
  margin-right: 12rpx;
}

.time-text {
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.detail-content {
  padding: 40rpx 36rpx;
  background-color: #ffffff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  position: relative;
  z-index: 1;
}

.detail-section {
  margin-bottom: 48rpx;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    /* 底部安全区域 + tabBar */
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.section-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.7;
  display: block;
  letter-spacing: 0.3px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 24rpx;
}

.feature-tag {
  background-color: #f6f7f9;
  padding: 12rpx 24rpx;
  border-radius: 28rpx;
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;

  &:active {
    background-color: #f0f1f3;
    transform: scale(0.98);
  }
}

.contact-text {
  font-size: 30rpx;
  color: #4A90E2;
  display: block;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.action-buttons {
  display: flex;
  gap: 24rpx;
  margin-top: 48rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;

  &.navigate-btn {
    background: linear-gradient(135deg, #4A90E2 0%, #67A7F3 100%);
    color: #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.2);
    }
  }

  &.share-btn {
    background-color: #f6f7f9;
    color: #666;

    &:active {
      background-color: #f0f1f3;
      transform: scale(0.98);
    }
  }
}

.btn-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .detail-image-container {
    background-color: #1c1c1e;
  }

  .section-title {
    color: #fff;
  }

  .section-text {
    color: #999;
  }

  .feature-tag {
    background: #2C2C2E;
    color: #999;

    &:active {
      background: #3A3A3C;
    }
  }

  .contact-text {
    color: #67A7F3;
  }

  .action-btn {
    &.share-btn {
      background: #2C2C2E;
      color: #fff;

      &:active {
        background: #3A3A3C;
      }
    }
  }

  .detail-content {
    background: #1C1C1E;
  }
}

/* 添加语音导览按钮样式 */
.audio-guide-container {
  position: fixed;
  left: 50%;
  bottom: 40rpx;
  transform: translateX(-50%);
  z-index: 100;
}

.audio-guide-btn {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.5);

  .guide-icon {
    font-size: 48rpx;
    color: #B4846C;
    margin-right: 16rpx;
  }

  .guide-text {
    font-size: 28rpx;
    color: #4A3520;
    font-family: "FangSong", "STFangsong", serif;
    letter-spacing: 2rpx;
  }

  &:active {
    transform: scale(0.95);
  }
}

/* 语音详情弹窗样式 */
.audio-content {
  padding: 30rpx;

  .spot-image {
    width: 100%;
    height: 360rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
  }

  .audio-player {
    background: rgba(180, 132, 108, 0.1);
    padding: 20rpx;
    border-radius: 12rpx;
    margin-bottom: 30rpx;

    .audio-controls {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .control-btn {
        font-size: 80rpx;
        color: #B4846C;
        margin-right: 20rpx;
      }

      .audio-time {
        font-size: 24rpx;
        color: #7D5A50;
      }
    }
  }

  .spot-desc {
    font-size: 28rpx;
    color: #4A3520;
    line-height: 1.6;
    font-family: "FangSong", "STFangsong", serif;
    letter-spacing: 2rpx;
  }
}

/* 更新音频播放器样式 */
.audio-player {
  background: rgba(180, 132, 108, 0.1);
  padding: 20rpx;
  border-radius: 12rpx;
  margin: 20rpx 0;

  .audio-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .play-button {
      display: flex;
      align-items: center;
      padding: 8rpx 16rpx;
      background: rgba(180, 132, 108, 0.1);
      border-radius: 30rpx;

      .control-btn {
        font-size: 60rpx;
        color: #B4846C;
        margin-right: 8rpx;
      }

      .play-text {
        font-size: 26rpx;
        color: #B4846C;
      }
    }

    .audio-time {
      font-size: 24rpx;
      color: #7D5A50;
    }
  }
}
</style>